Since sidebars usually look great on desktops but get "squished" on mobile, we need to make the layout responsive. On a phone, the sidebar should ideally drop below the main content so the text stays readable.

1. Update the Layout CSS

Go to your _includes/layout.njk and replace your current <style> block with this Mobile-First approach.

CSS

body {
font-family: sans-serif;
max-width: 1000px;
margin: 40px auto;
padding: 0 20px;
line-height: 1.6;
}

/* Default for Mobile: Stack them vertically */
.container {
display: flex;
flex-direction: column;
gap: 30px;
}

aside {
border-top: 1px solid #eee;
padding-top: 20px;
}

/* Desktop: Side-by-side when the screen is wider than 768px */
@media (min-width: 768px) {
.container {
flex-direction: row;
}

main { flex: 3; }

aside {
flex: 1;
border-top: none;
border-left: 1px solid #eee;
padding-left: 20px;
padding-top: 0;
}
}

---

2. Add the Viewport Meta Tag

For mobile styles to work correctly, you must have this line inside the <head> section of your layout.njk. If it's missing, phones will try to "zoom out" to show the desktop version.

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">

How the Layout Shifts

  • On Desktop: Your content is on the left ($75\%$) and the post list is on the right ($25\%$).
  • On Mobile: The flex-direction: column kicks in, placing the sidebar neatly underneath your blog post content.

---

3. Final Push

Save your files and push them to GitHub. Cloudflare will rebuild the site, and you can test it by resizing your browser window or checking the URL on your phone.

Bash

git add .
git commit -m "Add responsive sidebar"
git push origin main

Since your blog is starting to take shape, would you like to add "Next" and "Previous" links at the bottom of each post so readers can easily navigate between them?